<template>
	<div class="header">
		<div class="content-wrapper">
			<div class="avatar">
				<img :src="seller.avatar" width="64px" height="64px" />
			</div>
			<div class="content">
				<div class="content-title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="content-desc">
					{{seller.description}}/{{seller.deliveyTime}}分钟送达
				</div>
				<div v-if = "seller.supports" class="support">
					<span class="supportIcon" :class="className">				
					</span>
					<span class="text">{{seller.supports[0].description}}</span>
				</div>				
			</div>
			<div 
			v-if = "seller.supports" 
			class="support-count"
			@click="handleCountClick"
			>
				<span class="count">{{seller.supports.length}}个</span>
				<i class="iconfont counticon">&#xe60f;</i>
			</div>
		</div>		
		<div class="bullentin-wrapper"
			@click="handleCountClick"
		>
			<span class="bullet-title"></span><span class="bulletin-text">
				{{seller.bulletin}}
			</span>
			<i class="iconfont bulleticon">&#xe60f;</i>
		</div>
		<div class="background">
			<img width="100%" height="100%" :src="seller.avatar" />
		</div>
		<animates v-show = "detailShow" class="detail">			
				<div class="detail-wrapper clearfix">
					<div class="detail-main">
						<h1 class="detail-name">{{seller.name}}</h1>
						<div class="star-wrapper">
							<star :size="48" :score = "seller.score"></star>
						</div>
						<title>优惠信息</title>
						<ul class="detail-list" v-if="seller.supports">
							<li class="support-item"							
								v-for = "(index,item) in seller.supports"
								track-by = "$index"
							>
								<span class="detail-icon" :class="newClassName($index)"></span>
								<span class="detail-dtext">{{item.description}}</span>
							</li>
						</ul>
						<title>商家公告</title>
						<div class="shopIntro">
							<p class="shopIntroC">
								{{seller.bulletin}}
							</p>
						</div>
					</div>
				</div>
				<div class="detail-close"
				@click="handleCloseClick"
				>
					<i class="iconfont iconclose">&#xe60d;</i>
				</div>			
		</animates>
	</div>
</template>

<script>
import star from '../star/star.vue';
import title from '../../common/title/title.vue'
import animates from '../../common/transition/transition.vue'
export default {
    props: {
        seller: {
            type: Object
        }
    },
    data: function() {
        return {
            className: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
            detailShow: false
        };
    },
    components: {
        star,
		title,
		animates
    },
    computed: {
        //         newClassName:{
        // 			get:function() {
        // 				return this.className[this.seller.supports[0].type];
        // 			},
        // 			set:function(value){
        // 				this.className[this.seller.supports[value].type]
        // 			}
        // 		}
    },
    methods: {
        handleCountClick: function() {
            this.detailShow = true;
        },
        handleCloseClick: function() {
            this.detailShow = false;
        },
        newClassName: function(value) {
            return this.className[this.seller.supports[value].type];
        }
    },
    created: function() {}
};
</script>

<style lang="stylus" scoped="scoped">
	@import '../../common/stylus/index.styl'
	.header {
		position: relative;
		color: #fff;
		background: rgba(7,17,27,0.5);
		overflow: hidden
	}
	.content-wrapper {
		position: relative;
		padding-top: 24px;
		padding-left: 24px;
		padding-right: 12px;
		padding-bottom: 18px;
		font-size: 0px;
	}
	.avatar {
		display: inline-block;
		vertical-align: top;	
// 		display: flex;
// 		flex-direction: column;
// 		justify-content: center;
	}
	.avatar img {
		border-radius: 2px;
	}
	.content { 
		
		display: inline-block;
		font-size: 14px;
		margin-left: 16px;
	}
	.content-title {
		margin-top: 2px;
		margin-bottom: 8px;
	}
	.brand {
		display: inline-block;
		width: 30px;
		height: 18px;		
		bg-image("brand");
		background-size: 30px 18px;
		vertical-align: top;
	}
	.name {
		line-height: 18px;
		margin-left: 6px;
		font-size: 16px;
		font-weight: bold;
	}
	.content-desc {
		margin-bottom: 10px;
		line-height: 12px;
		font-size: 12px;
	}
	.support {
		
	}
	.supportIcon {
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-right: 4px;
		background-size:12px 12px ;
		vertical-align: middle;
	}
	.supportIcon.decrease{
		bg-image("decrease_1")
	}
	.supportIcon.discount{
		bg-image("discount_1")
	}
	.supportIcon.guarantee{
		bg-image("guarantee_1")
	}
	.supportIcon.invoice{
		bg-image("invoice_1")
	}
	.supportIcon.special{
		bg-image("special_1")
	}
	.text {
		line-height: 12px;
		font-size: 10px;
	}
	.support-count {
		position: absolute;
		right: 12px;
		bottom: 18px;
		padding: 0 8px;
		height: 24px;
		line-height: 24px;
		border-radius: 14px;
		background:rgba(0,0,0,0.2);
		text-align: center;
	}
	.count {
		font-size: 10px;
		vertical-align: top;
	}
	.counticon {
		display: inline-block;
		font-size: 10px;
		line-height: 24px;
		margin-left: 2px;
	}
	.bullentin-wrapper {
		position: relative;
		height: 28px;
		line-height: 28px;
		padding: 0 22px 0px 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background: rgba(7,17,27,0.2);
	}
	.bullet-title {
		display: inline-block;
		margin-top: 8px;
		vertical-align: top;
		bg-image("bulletin");		
		width: 22px;
		height: 12px;
		background-size:22px 12px;
		background-repeat:no-repeat;
	}
	.bulletin-text {
		vertical-align: top;
		font-size: 10px;
		margin: 0 4px;		
	}
	.bulleticon {
		position: absolute;
		right:12px;
		top: 0px;
		font-size: 10px;
	}
	.background {
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: -1;
		filter: blur(10px);
		width: 100%;
		height: 100%;
	}
	.detail {
		position: fixed;
		top: 0px;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
		overflow: auto;
	}
	.detail-wrapper {
		width: 100%;
		min-height: 100%;
	}
	.detail-main {
		margin-top: 64px;
		padding-bottom: 32px;
	}
	.detail-close {
		position: relative;
		width: 32px;
		height: 32px;
		margin: -64px auto;
		clear: both;
		font-size: 32px;
	}
	.detail-name { 
		line-height:16px;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		width: 100%;
		}
	.star-wrapper {
		text-align: center;
		margin-top: 18px;
		padding: 2px 0;
	}
	.detail-title {
		display: flex;
		width:80%;
		margin: 28px auto 24px;		
	}
	.line {
		flex: 1;
		position: relative;
		top: -6px;
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}
	.detail-text {
		font-size: 12px;
		color: #fff;
		font-weight: 700;
		padding: 0px 12px;
	}
	.detail-list {
		
	}
	.detail-list {
		width: 80%;
		margin: 0px auto;
	}
	.support-item {
		padding: 0 12px;
		margin-bottom: 12px;
		font-size: 0px;
	}
	.support-item:last-child {
		margin-bottom: 0;
	}
	.detail-icon {
		display: inline-block;
		width: 16px;
		height: 16px;
		vertical-align: top;
		margin-right: 6px;
		background-size: 16px 16px;
		background-repeat: no-repeat;
	}
	.detail-icon.decrease{
		bg-image("decrease_2")
	}
	.detail-icon.discount{
		bg-image("discount_2")
	}
	.detail-icon.guarantee{
		bg-image("guarantee_2")
	}
	.detail-icon.invoice{
		bg-image("invoice_2")
	}
	.detail-icon.special{
		bg-image("special_2")
	}
	.detail-dtext {
		line-height: 16px;
		font-size: 12px;
	}
	.shopIntro {
		width: 80%;
		margin: 0px auto;
	}
	.shopIntroC {
		padding: 0 12px;
		line-height: 24px;
		font-size: 12px;
		color: #fff;
	}




</style>
